<template>
  <div class="add-group-friend-main">
    <div class="add-group-friend-head">
      <div class="head-title">
        加群好友
        <span class="example-text">示例</span>
        <div class="example-modal">
          <img class="example-cover" src="@/assets/images/pic_add_friend_example.png" />
        </div>
      </div>
    </div>
    <div class="add-group-friend-wrap">
      <div class="add-group-friend-container">
        <div class="dead-processbar" :class="taskStatus==1?'dead-processbar-orange':'dead-processbar-blue'">
          <div class="dead-processbar-img">
            <div class="process-img-wrap">
              <div v-if="taskStatus==0" class="process-img-inner">
                <img src="https://s.yezgea02.com/1662103531639/%E5%8F%91%E9%82%AE%E4%BB%B63.png" style="width: 70px;" />
              </div>
              <div v-if="taskStatus==1" class="process-img-inner">
                <img src="//s.yezgea02.com/1660534537305/%E7%BC%96%E7%BB%84%2022%402x.png" style="width: 70px;" />
              </div>
            </div>
          </div>
          <div class="dead-processbar-main">
            <div v-if="taskStatus==0" class="f-20 mb-10 fw-0">正在发送好友请求</div>
            <div v-if="taskStatus==1" class="f-20 mb-10 fw-0">已暂停</div>

            <div class="c_text3">
              <span>今日已加群好友 </span>
              <a class="c_primary">0</a>
              /50,还有 <a class="c_primary">0</a>位待发送
            </div>
          </div>
          <div class="dead-processbar-btns">
            <el-button v-if="taskStatus==0" size="small" type="primary" @click="changeStatus(1)">暂停</el-button>
            <el-button v-if="taskStatus==1" size="small" type="warning" @click="changeStatus(0)">继续</el-button>

            <el-dropdown placement="bottom-start">
              <el-button type="primary" size="small" plain v-hasPermi="['single-add-group-friend:add']">
                <i class="el-icon-plus"></i>
                新建任务
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <div class="dropdown-menu-body">
                  <div class="dropdown-menu-item mb-12" @click.stop="onNavigationTo('/single/add-group-friend/add')">
                    <span class="menu-title">手动任务（选择存量群成员）</span>
                    <div class="menu-desc">选择要添加的群成员，任务创建后添加。</div>
                  </div>
                  <div class="dropdown-menu-item mb-12" @click.stop="onNavigationTo('/single/add-group-friend/add-group')">
                    <span class="menu-title">手动任务（按群选择群成员）</span>
                    <div class="menu-desc">选择要添加群成员所属的群，任务创建后系统自动筛选出这些群里符合设置条件的群成员添加。</div>
                  </div>
                  <div class="dropdown-menu-item" @click.stop="onNavigationTo('/single/add-group-friend/add-auto')">
                    <span class="menu-title">自动任务（新群成员自动加）</span>
                    <div class="menu-desc">选择要添加群成员所属的群，任务创建后这些群里符合设置条件的新成员自动发起添加。</div>
                  </div>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
            <div>
              <el-button size="small" plain v-hasPermi="['single-add-group-friend:auto']" @click="onNavigationTo('/single/add-group-friend/auto-task-list')">
                <i class="el-icon-bank-card"></i>
                管理自动任务
              </el-button>
            </div>
            <div>
              <el-button size="small" plain v-hasPermi="['single-add-group-friend:data']">
                <svg-icon class-name="barchart-icon" icon-class="barchart" />
                数据统计
              </el-button>
            </div>
            <div>
              <el-button plain size="small" class="icon-button setting" @click="dialogVisible = true" v-hasPermi="['single-add-group-friend:mgt']">
                <i class="el-icon-setting"></i>
              </el-button>
            </div>
          </div>
        </div>
        <div class="table-filter-wrap">
          <div>
            <el-radio-group v-model="status" size="small" plain class="plainradiobtn">
              <el-radio-button label="0">待发送(0)</el-radio-button>
              <el-radio-button label="1">待通过(0)</el-radio-button>
              <el-radio-button label="2">已通过(0)</el-radio-button>
            </el-radio-group>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                各状态列表数据处理逻辑：<br />
                待发送：最多支持3万条，如超过，创<br />建时间最早的会被删除。
                待通过：只保留近30天执行添加的记<br />录。
                已通过：只保留近30天通过的记录。<br />
                PS：每日执行的历史数据请至数据统<br />计处查看。
              </div>
              <a style="color: rgb(47, 84, 235);margin-left: 5px;">
                状态说明<svg-icon icon-class="iquestion" style="margin-left: 2px;" />
              </a>
            </el-tooltip>
          </div>
          <div class="flex-rows">
            <el-button size="small" style="width: 88px;">全部取消</el-button>
            <el-select size="small" v-model="form.wxid" placeholder="所属群聊" style="width: 200px">
              <el-option label="R:10872808270145562" value="2"></el-option>
              <el-option label="区域测试群一" value="1"></el-option>
            </el-select>
            <el-select size="small" v-model="form.wxid" placeholder="任务类型" style="width: 98px">
              <el-option label="手动任务" value="2"></el-option>
              <el-option label="自动任务" value="1"></el-option>
            </el-select>
            <el-button size="small" icon="el-icon-delete" :disabled='multiple' style="width: 138px;">批量部分取消</el-button>
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80" fixed align="center" />
          <el-table-column prop="number" label="群成员">
            <template slot-scope="scope">
              <div class="flex kh_box aligncenter">
                <img
                  src="https://wework.qpic.cn/wwpic/64761_KTqc9qrgS9Cinq5_1696990323/0"
                  alt=""
                  class="useravatar"
                />
                <div class="khnamebox flex pl-12">
                  <div class="title c_222333">{{ scope.row.title || '闵雨薇'}} </div>
                  <div class="c_f08b00">@锐行</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="task_status" label="所在群">
            <template slot-scope="scope">
              <div class="flex kh_box aligncenter">
                <img
                  src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                  alt=""
                  class="useravatar"
                />
                <div class="khnamebox flex pl-12">
                  <div class="title c_222333">{{ scope.row.title||'123' }} </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="所属任务">
            <template slot-scope="scope">
              <span>手动加群好友{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="任务类型">
            <template slot-scope="scope">
              <span>手动任务（选择存量群成员）{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="option" label="验证消息">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.info||'文本内容'" placement="top-start">
                <i class="el-icon-chat-line-round f-16 fw"></i>
              </el-tooltip>
              <!-- <i class="el-icon-chat-line-round"></i> -->
            </template>
          </el-table-column>
          <el-table-column prop="option" label="操作">
            <template slot-scope="scope">
              <el-popconfirm title="确定取消？">
                <el-button  type="text" slot="reference">取消</el-button>
              </el-popconfirm>
              <!-- <el-button type="text">取消</el-button> -->
            </template>
          </el-table-column>
          <template slot="empty">
            <TableEmpty />
          </template>
        </el-table>
      </div>
    </div>
    <SettingAddFriendDialog :visible="dialogVisible" @handCloseDialog="onHandCloseDialog"/>
  </div>
</template>
<script>
import SettingAddFriendDialog from './components/AddFriendDialog'
export default {
  data() {
    return {
      taskStatus:1,// 0正在发送 1暂停
      status: '0',
      taskInfoVisible: false,
      customerVisible: false,
      enterpriseVisible: false,
      checked: true,
      dialogVisible: false,
      tableData:[
        {
          number:0,
        }
      ],
      multipleSelection:[],
      multiple:false,
      form: {
        customerType: 1,
        accountType: 1,
      },
    }
  },
  components: {
    SettingAddFriendDialog
  },
  methods: {

    changeStatus(status){
      this.taskStatus = status
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.id);
      //   this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    onNavigationTo(path) {
      this.$router.push(path)
    },
    onHandCloseAcceptDialog() {
      this.taskInfoVisible = false
    },
    onHandCloseCustomerDialog() {
      this.customerVisible = false
    },
    onHandCloseEnterpriseAccountDialog() {
      this.enterpriseVisible = false
    },
    onHandCloseDialog() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.add-group-friend-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .add-group-friend-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .head-title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;

      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;
        ;
        font-weight: 400;

        &:hover+.example-modal {
          display: block;
        }
      }

      .example-modal {
        position: fixed;
        left: 0;
        margin-top: 10px;
        display: none;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        background: #FFFFFF;

        .example-cover {
          height: 600px;
        }
      }
    }

    .head-setting {
      display: flex;
      align-items: center;

      .check-box {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;

        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }

  .add-group-friend-wrap {
    padding: 12px;
    display: flex;
    justify-content: center;

    .add-group-friend-container {
      height: calc(100vh - 122px);
      background-color: #fff;
      overflow: auto;
      width: 1200px;

      .dead-processbar {
        height: 120px;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #fff;

        &.dead-processbar-blue {
          background-image: url('https://s.yezgea02.com/1660533072602/%E7%9F%A9%E5%BD%A2%402x%20(6).png');
          background-repeat: no-repeat;
          background-size: cover;
        }

        &.dead-processbar-orange {
          background-image: url('https://s.yezgea02.com/1660529186803/%E7%BC%96%E7%BB%84%2023%402x%20(1).png');
          background-repeat: no-repeat;
          background-size: cover;
        }

        .dead-processbar-img {
          padding: 0 28px;

          .process-img-wrap {
            width: 80px;
            height: 80px;
            overflow: hidden;
            position: relative;

            .process-img-inner {
              position: absolute;
              width: 64px;
              height: 64px;
              top: 8px;
              left: 8px;
              background: linear-gradient(180deg, #8ae438, #52c41a);
              border-radius: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 36px;
              color: #fff;
            }
          }
        }

        .dead-processbar-main {
          text-align: left;
        }

        .dead-processbar-btns {
          display: flex;
          white-space: nowrap;
          margin: 0 20px 0 auto;
          gap: 10px;

          .icon-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;

            .setting {
              font-size: 20px;
            }
          }
        }
      }

      .table-filter-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px;

        .flex-rows {
          display: flex;
          gap: 8px;
        }
      }
    }
  }
}
</style>
<style>
.dropdown-menu-body {
  padding: 8px 12px;
}

.dropdown-menu-body .dropdown-menu-item {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding: 12px;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  transition: all .3s;
  width: 376px;
}

.dropdown-menu-body .dropdown-menu-item:hover {
  border: 1px solid #3070ff;
}

.dropdown-menu-body .dropdown-menu-item .menu-title {
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
  margin-bottom: 3px;
}

.dropdown-menu-body .dropdown-menu-item .menu-desc {
  white-space: pre-wrap;
}
</style>
